<template>
	<radio-group class="radio-group" @change="radioChange">
		<label class="uni-list-cell" v-for="(item, index) in data" :key="index" @tap="tap(item)">
			<view class="uni-list-cell-pd">
				<view class="item">
					<radio :value="item.value" :checked="index === current" style="transform:scale(0.8)" v-if="showRadio"/>
					<image src="/static/img/logo.png" mode="aspectFill"></image>
					<view class="info">
						<view class="name">
							<text>张春芳 |</text>
							<text>失能</text>
						</view>
						<view class="age">
							60岁 13612341234
						</view>
					</view>
					<view class="status">
						<image v-if="item.status == 1" :src="$wanlshop.oss('/uploads/20240705/897e2de53be06cbfeabb4a89679d5f2c.png')" mode="widthFix"></image>
						<image v-if="item.status == 2" :src="$wanlshop.oss('/uploads/20240704/92de2c8b0122c3c9ec2dad241d811b5b.png')" mode="widthFix"></image>
					</view>
					<view class="right" @tap.stop="item.show = !item.show" :class="item.show ? 'cur' : ''">
						<image :src="$wanlshop.oss('/uploads/20240705/a84f8f88198e82609122cfc010b89dea.png')" mode="widthFix"></image>
					</view>
					<text class="tag" :class="'status'+item.status" v-if="item.status == 3">待照护</text>
					<text class="tag" :class="'status'+item.status" v-if="item.status == 4">待打卡</text>
				</view>
				<view class="text" v-if="item.show" :style="{'marginLeft':showRadio ? '46rpx' : ''}">
					<text>服务类型：生活照料服务、精神慰籍</text>
					<text>服务项目：助洁、情绪疏导、亲情陪伴</text>
					<text>服务人员：李金平、周红梅</text>
				</view>
			</view>
		</label>
	</radio-group>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default() {
					return [];
				}
			},
			showRadio: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				current: null,
			}
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.data.length; i++) {
					if (this.data[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			tap(item) {
				this.$emit('choose',item)
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #EDEDED;
	}

	.radio-group {
		width: 100%;
	}

	.uni-list-cell-pd {
		background-color: #fff;
		margin-bottom: 10rpx;
	}

	.text {
		padding-left: 40rpx;
		padding-bottom: 18rpx;

		text {
			font-family: PingFang SC, PingFang SC;
			display: inline-block;
			height: 33rpx;
			line-height: 33rpx;
			margin-bottom: 6rpx;
			color: #333333;
			font-size: 28rpx;
		}
	}

	.item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		width: 100%;
		position: relative;
		min-height: 180rpx;

		>image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}

		.info {
			display: flex;
			flex-direction: column;
			flex: 1;

			.name {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					font-family: PingFang SC, PingFang SC;
					font-size: 28rpx;
					font-weight: 500;
					color: #FE262A;

					&:nth-child(1) {
						color: #333333;
						margin-right: 4px;
						font-size: 34rpx;
					}
				}
			}

			.age {
				color: #333333;
				font-size: 28rpx;
				margin-top: 2px;
			}
		}

		.status {
			margin-right: 18rpx;

			image {
				width: 150rpx;
				height: 126rpx;
			}
		}

		.right {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			flex-direction: column;
			&.cur {
				transform: rotate(-180deg);
			}
			text {
				display: inline-block;
			}
		}

		.tag {
			position: absolute;
			right: 16rpx;
			top: 10rpx;
			display: inline-block;
			font-family: PingFang SC, PingFang SC;
			border: 1px solid #FF2929;
			color: #FF2929;
			font-size: 28rpx;
			font-weight: 500;
			padding: 2rpx 18rpx;
			border-radius: 10rpx;
			&.status3 {
				border: 1px solid #FF2929;
				color: #FF2929;
			}
			&.status4 {
				border: 1px solid #FF8C38;
				color: #FF8C38;
			}
		}
	}
</style>